<template>
    <div class="container">
        <van-swipe :autoplay="3000" class="header-swipe">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image" class="hd-img-responsive" />
            </van-swipe-item>
        </van-swipe>
        <div class="main-body">
            <van-tabs v-model="active" sticky @scroll="onScroll" color="#4D682E">
                <van-tab title="旅游活动">
                    <div class="wx-group hd-shadow" v-for="(item, index) in activitygrouplist" :key="index">
                        <div class="title">{{item.name}}</div>
                        <div class="label-group">
                            <span class="item">{{item.label}}</span>
                        </div>
                        <div class="desc">{{item.describe}}</div>
                        <van-icon name="qr" class="qr" />
                    </div>
                    <div class="wx-group hd-shadow">
                        <div class="title">家事通爱旅游一群</div>
                        <div class="label-group">
                            <span class="item">旅游</span><span class="item">户外</span><span class="item">健康快乐</span>
                        </div>
                        <div class="desc">爱旅游,爱生活,家事通旅游一群,为大家提供至真至诚的旅游服务,约志同道合的好友共同出游!</div>
                        <van-icon name="qr" class="qr" />
                    </div>
                    <div class="style_01">
                        <div class="hd-shadow common-unit" @click="info(item)" v-for="(item, index) in wxsmkactivelist" :key="index">
                            <img :src="item.img" class="hd-img-responsive"/>
                            <div class="title">{{item.sale_name}}</div>
                            <div class="desc">
                                <span class="asign">出发时间: {{item.start_time}}</span>
                                <span class="fee"><em>¥</em>{{item.market_price}}</span>
                            </div>
                            <van-progress
                                    :percentage="23"
                                    pivot-text="23/100"
                                    pivot-color="#4D682E"
                                    color="linear-gradient(to right, #78EB86, #4D682E)"
                            />
                        </div>
                        <a href="https://weixint.juyouhx.com/views/welfare_citycard/product_intro.html?cid=tz00413874f56d3d2&id=" class="hd-shadow common-unit">
                            <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/active/active_01.png" class="hd-img-responsive"/>
                            <div class="title">沈阳怪坡滑雪场冰雪总动员</div>
                            <div class="desc">
                                <span class="asign">出发时间: 2019-03-31 8:30</span>
                                <span class="fee"><em>¥</em>40</span>
                            </div>
                            <van-progress
                                    :percentage="75"
                                    pivot-text="75/100"
                                    pivot-color="#4D682E"
                                    color="linear-gradient(to right, #78EB86, #4D682E)"
                            />
                        </a>
                        <div class="hd-shadow common-unit">
                            <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/active/active_02.png" class="hd-img-responsive"/>
                            <div class="title">畅游迪斯尼上海6日游[全程无购物]</div>
                            <div class="desc">
                                <span class="asign">出发时间: 2019-03-31 8:30</span>
                                <span class="fee"><em>¥</em>6800</span>
                            </div>
                            <van-progress
                                    :percentage="23"
                                    pivot-text="23/100"
                                    pivot-color="#4D682E"
                                    color="linear-gradient(to right, #78EB86, #4D682E)"
                            />
                        </div>
                        <div class="hd-shadow common-unit">
                            <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/active/active_03.png" class="hd-img-responsive"/>
                            <div class="title">29元沈阳故宫一日游[爱国教育专线]</div>
                            <div class="desc">
                                <span class="asign">出发时间: 2019-03-31 8:30</span>
                                <span class="fee"><em>¥</em>29</span>
                            </div>
                            <van-progress
                                    :percentage="89"
                                    pivot-text="89/100"
                                    pivot-color="#4D682E"
                                    color="linear-gradient(to right, #78EB86, #4D682E)"
                            />
                        </div>
                    </div>
                </van-tab>
                <van-tab title="交友活动">
                    <van-row gutter="10" class="style_02">
                        <van-col span="12">
                            <div class="hd-shadow common-unit">
                                <img src="http://skv4.oss-cn-hangzhou.aliyuncs.com/demo/shop_ico.png" class="hd-img-responsive"/>
                                <div class="title">单身旅游的人士更为自信、优雅、不羁,拥有较强的独立性</div>
                                <div class="desc">
                                    <span class="asign">2019-03-31</span>
                                    <span class="fee"><em>¥</em>20</span>
                                </div>
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="hd-shadow common-unit">
                                <img src="http://skv4.oss-cn-hangzhou.aliyuncs.com/demo/shop_ico.png" class="hd-img-responsive"/>
                                <div class="title">单身旅游的人士更为自信、优雅、不羁,拥有较强的独立性</div>
                                <div class="desc">
                                    <span class="asign">2019-03-31</span>
                                    <span class="fee"><em>¥</em>20</span>
                                </div>
                            </div>
                        </van-col>
                        <van-col span="12"><div class="hd-shadow common-unit">2</div></van-col>
                        <van-col span="12"><div class="hd-shadow common-unit">2</div></van-col>
                    </van-row>
                </van-tab>
                <van-tab title="亲子活动">
                    <div class="home-title hd-shadow common-unit">
                        亲子活动
                    </div>
                </van-tab>
                <van-tab title="慈善活动">
                    <div class="home-title hd-shadow common-unit">
                        慈善活动
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
export default {
  name: 'upgrade',
  data () {
    return {
      active: 0,
      activitygrouplist: [],
      wxsmkactivelist: [],
      images: [
        'http://city-card.oss-cn-hangzhou.aliyuncs.com/index/tour_ad.png'
      ]
    }
  },
  methods: {
    onScroll (sc) {
      // this.$toast(sc.scrollTop+'|'+sc.isFixed);
      if (sc.isFixed === true) {
        console.log('2')
      }
    },
    init () {
      this.$http({
        fun: 'activitygrouplist',
        type: '1',
        cb: res => {
          console.log(res)
          this.activitygrouplist = res
          this.activitygrouplist.forEach(item => {
            console.log('111')
          })
        }
      })
      this.$http({
        fun: 'wxsmkactivelist',
        type: '1',
        cb: res => {
          console.log(res)
          this.wxsmkactivelist = res
          this.wxsmkactivelist.forEach(item => {
            console.log('111')
          })
        }
      })
    },
    info (item) {
      console.log(item.id)
      // https://weixint.juyouhx.com/views/welfare_citycard/product_intro.html?cid=tz00413874f56d3d2&id=item.id
    }
  },

  mounted () {
    this.init()
  }
}

</script>

<style src="./index.css" scoped>
</style>
